<template>
  <!-- 我的 -->
  <view class="home">
    <!-- 信息栏 -->
    <view class="home-info">
      <view class="home-info-left">
        <image :src="userInfo.headImage"></image>
      </view>
      <view class="home-info-middle">
        <view
          @click="
            () => {
              if (userInfo.name == '请先登录') {
                $to('/pages/login/index');
              }
            }
          "
          >{{ userInfo.name }}
        </view>
        <view>{{ userInfo.signature || "" }}</view>
      </view>
      <view class="home-info-right">
        <!-- <u-button type="primary" shape="circle">
          <image src="/static/icon/edit.svg"></image>
        </u-button> -->
        <view
          class="home-info-right-img"
          @click="$to('/mySubPack/userInfo/index')"
        >
          <image src="/static/icon/edit.svg"></image>
        </view>
      </view>
    </view>
    <!-- 我的 -->
    <view class="home-my">
      <view class="home-my-list">
        <u-grid col="4" @click="click">
          <u-grid-item
            v-for="(baseListItem, baseListIndex) in baseList"
            :key="baseListIndex"
            @tap="$to(baseListItem.url)"
          >
            <u-icon
              :customStyle="{ paddingTop: 20 + 'rpx' }"
              :name="baseListItem.name"
              :size="22"
            ></u-icon>
            <text class="grid-text">{{ baseListItem.title }}</text>
          </u-grid-item>
        </u-grid>
      </view>
    </view>
    <!-- 跳转 -->
    <view class="home-list">
      <view class="home-list-box">
        <u-cell-group>
          <u-cell
            v-for="item in ceilList"
            :isLink="true"
            arrow-direction="right"
            :title="item.title"
            @click="$to(item.url)"
          ></u-cell>
        </u-cell-group>
      </view>
    </view>
    <!-- 退出登录 -->
    <view class="home-loginOut">
      <u-button
        @click="loginOut"
        type="info"
        :plain="true"
        text="退出登录"
      ></u-button>
    </view>
  </view>
</template>

<script>
import { login_API } from "../../api/login";

export default {
  data() {
    return {
      // ceil数据2
      ceilList: [
        {
          title: "购物车",
          url: "/pages/shoppingCard/index",
        },
        {
          title: "地址管理",
          url: "/mySubPack/address/index",
        },
        {
          title: "我的订单",
          url: "/mySubPack/myOrder/index",
        },
        {
          title: "批次管理",
          url: "/mySubPack/piCi/index",
        },
        {
          title: "隐私协议",
          url: "/mySubPack/yinSi/index",
        },
      ],
      // 我的
      baseList: [
        {
          name: "order",
          title: "我的帖子",
          url: "/mySubPack/myForum/index",
        },
        {
          name: "chat",
          title: "我的评论",
        },
        {
          name: "star",
          title: "我的收藏",
          url: "/mySubPack/collect/index",
        },
        {
          name: "thumb-up-fill",
          title: "我的点赞",
          url: "/mySubPack/like/index",
        },
      ],
      // 个人信息
      userInfo: {
        headImage: "",
        name: "",
        signature: "",
      },
    };
  },
  methods: {
    // 退出登录
    loginOut() {
      uni.removeStorageSync("USER-INFO");
      this.userInfo = {
        headImage: "",
        name: "请先登录",
        signature: "",
      };
    },
  },
  onLoad(options) {
    this.userInfo = JSON.parse(uni.getStorageSync("USER-INFO") || {});
  },
};
</script>

<style lang="scss" scoped>
.grid-text {
  font-size: 14px;
  color: #909399;
  padding: 10rpx 0 20rpx 0rpx;
  /* #ifndef APP-PLUS */
  box-sizing: border-box;
  /* #endif */
}

.home {
  height: 100%;
  font-size: 14px;
  background-color: #f0f7ff;
  position: relative;

  &-info {
    background: linear-gradient(to right, #9cccfa, #84fa74);
    overflow: hidden;
    font-weight: 700;
    height: 170rpx;
    display: flex;
    box-sizing: border-box;

    &-left {
      width: 200rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 100rpx;
      }
    }

    &-middle {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;

      view {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    &-right {
      width: 100rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
      text-align: center;

      &-img {
        border-radius: 50%;
        border: 1px solid rgba(179, 177, 177, 0.5);
        margin-left: 10rpx;
        width: 45rpx;
        height: 45rpx;
        background-color: rgba(255, 255, 255, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;

        image {
          width: 35rpx;
          height: 35rpx;
        }
      }
    }
  }

  &-my {
    padding: 0 15rpx;
    margin-top: 30rpx;

    &-list {
      background-color: #ffffff;
      border-radius: 15rpx;
    }
  }

  &-list {
    padding: 0 15rpx;
    margin-top: 60rpx;

    &-box {
      border-radius: 15rpx;
      background-color: #ffffff;
    }
  }

  &-loginOut {
    box-sizing: border-box;
    position: absolute;
    bottom: 10rpx;
    padding: 0 15rpx;
    width: 100%;
  }
}
</style>
